import React, { Component } from 'react'
import '../../common/common.css'
const explain = `
    此组件仅在生产环境中生效，当前开发环境只会显示一会就跳到报错的场景下。进行yarn build打包后会生成一个build文件夹，
    然后运行serve -s build就可以启动线上环境了。这个运行serve -s build有个前提，需要安装第三方库 npm install --global serve。    
`
export default class ErrorBoundaryComponent extends Component {
    state = {
        hasError: '' //用于标识子组件是否产生错误
    }
    //当Parent的子组件出现报错时候，会触发getDerivedStateFromError调用，并携带错误信息
    static getDerivedStateFromError(error) {
        console.log('@@@', error);
        return { hasError: error }
    }

    componentDidCatch() {
        console.log('此处统计错误，反馈给服务器，用于通知编码人员进行bug的解决');
    }

    render() {
        return (
            <div>
                <button className='returnButton'><a href="/">点击返回主菜单</a></button>
                <div className='explain'>
                    <h2>组件说明</h2>
                    <p>{explain}</p>
                    <p>
                        具体实现:如果子组件没有报错正常显示,如果报错了,通过getDerivedStateFromError生命周期捕获子组件的报错。
                        如果需要复现错误则需要修改子组件users。
                        <br />
                        只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误。
                    </p>
                </div>
                <h2>我是Parent组件</h2>
                {this.state.hasError ? <h2 className='ErrorBoundaryChild'>当前网络不稳定，稍后再试</h2> : <Child />}
            </div>
        )
    }
}

class Child extends Component {
    state = {
        // users: [
        //     { id: '001', name: 'tom', age: 18 },
        //     { id: '002', name: 'jack', age: 19 },
        //     { id: '003', name: 'peiqi', age: 20 },
        // ]
        users:'abc'
    }

    render() {
        return (
            <div >
                <h2>我是Child组件</h2>
                {
                    this.state.users.map((userObj) => {
                        return <h4 key={userObj.id}>{userObj.name}----{userObj.age}</h4>
                    })
                }
            </div>
        )
    }
}